<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>css元素显示隐藏</title>
    <style>
        /* 元素显示隐藏
            display 显示隐藏
            visibility 显示隐藏
            overflow 溢出的部分显示隐藏
        */
        /* 
        display属性
            用于设置一个元素应如何显示
                none 隐藏元素
                    隐藏元素后 不再占有原来的位置 不是删除元素
                    block有和none相反的意思

                block 指定元素为块级元素
                     除了转换元素的意思外还有显示元素的意思
                inline 行内元素
                inline-block 行内块元素

        visibility   
            visible 显示元素
            hidden 隐藏元素 占有原来的位置 和display的none不同

        overflow 溢出显示
            visible 默认
            hidden 隐藏
            scroll  隐藏溢出容器的内容，溢出的内容可以通过滚动呈现 滚动条都存在
            auto 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。

          设置为非 visible时另一个属性会自动将默认值visible计算为auto

        */
        .a1 {
            width: 300px;
            height: 50px;
            background-color: pink;
            /* display: none; */
            /* visibility: hidden; */
        }
        .a2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            display: none;
        }
        .a22 {
            width: 50px;
            height: 50px;
            background-color: green;
           
        }
        div.b1 {
            width: 100px;
            height: 100px;
            background-color: green;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="b1">
            {{cword}}
        </div>
       
        <!-- <div class="a1">你好世界

        </div>
        <div class="a2">
            你好是
            <div class="a22">
                杀杀
            </div>
        </div> -->

    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
                cword :Mock.mock('@cword(100)')
            }
        },
    })
</script>

</html>